<template>
  <div>
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <!-- 语音回答 -->
    <div class="c-flex-row c-flexw-wrap" v-if="uploadAudioList.length > 0">
      <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in uploadAudioList" :key="index"  :class="(index+1)%3==0?'':'c-mr30'" class="c-ww160 c-hh60 c-br30 theme-bg-10 c-pl24 c-pr10 c-p c-flex-row c-aligni-center c-mb30">
        <div class="box c-ww32">
          <div class="wifi-symbol">
            <div class="wifi-circle first theme-bd2"></div>
            <div class="wifi-circle second theme-bd2" :class="playAduioSrc == item.url?'seconAnimation':''"></div>
            <div class="wifi-circle third theme-bd2" :class="playAduioSrc == item.url?'thirdAnimation':''"></div>
          </div>
        </div>
        <div class="c-fs20 theme-fc">{{changeTimeStr(item.time)}}</div>
        <i @click.stop="clickDelAudio(index)" class="iconfont c-fs12 c-fc-white del-img">&#xe61b;</i>
      </div>
    </div>
    <div class="c-br16 c-bd1-mgray c-ww80 c-hh80 c-flex-row c-aligni-center c-justify-center c-p">
      <div @click="clickAddAudio(index)" class="iconfont c-fs30 c-fc-gray">&#xe687;</div>
    </div>
    <div class="c-fs22 c-fc-gray c-mt10">上传录音（单条录音最长60分钟，可录多段）</div>
    <clock-audio-record :enableLongAudio='0' :clockInInfo="clockInInfo" :showAudioRecordModal='showAudioRecordModal' @closeAudioRecordModal='closeAudioRecordModal' @uploadAudioSuccess='uploadAudioSuccess'></clock-audio-record>
  </div>
</template>
<script>
import {utilJs } from "@/utils/common.js";
import clockAudioRecord from "@/components/templates/clockIn/clockAudioRecord.vue";
export default {
  name: "clockVoice",
  components: {
    clockAudioRecord,
  },
  props: {
    uploadAudioList: {
      type: Array,
      default: []
    },
    formLindex: {
      type: Number,
      default: 0
    },
    clockInInfo: {
      type:Object,
      default: () => {}
    },
  },
  data() {
    return {
      isWeiXin : utilJs.isWeiXin() && utilJs.isMobileUserAgent(),
      showAudioRecordModal:false,
      playAduioSrc:''
    };
  },
  watch: {},
  mounted() {
  },
  methods: {
    //点击开始播放音频
    clickPlayAudio(audioUrl) {
      let audio = document.getElementById("audio");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;

      if (this.playAduioSrc && this.playAduioSrc.includes("http")) {
        document.getElementById("audio").src = this.playAduioSrc;
        audio.play();
      }
    },

    //监听音频播放结束执行的内容
    playAudioEnd() {
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    //时间转换成"形式
    changeTimeStr(timeStr) {
      return utilJs.timeTmpToNsTime(timeStr)
    },
    //添加音频
    clickAddAudio() {
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
      if (utilJs.getAppVersion() > 0) {
        this.initAppRecordEvent();
        utilJs.sendDataToAppNew('record', 'appAudioStartRecord');
        return;
      }
      this.showAudioRecordModal = true;
    },
    //关闭录音弹窗
    closeAudioRecordModal(state) {
      if (state == 1) {
        this.showAudioRecordModal = false;
      }
    },
    //音频上传成功
    uploadAudioSuccess(audioContent, state) {
      if (state == 1) {
        this.showAudioRecordModal = false;
      }
      let audioItem = {
        url: audioContent.content,
        time: audioContent.time
      };
      this.uploadAudioList.push(audioItem);
      this.pusDate()
    },
    // 删除音频
    clickDelAudio(index) {
      if (document.getElementById("audio")) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        document.getElementById("audio").pause();
      }
      this.uploadAudioList.splice(index, 1);
      this.pusDate()
    },
    initAppRecordEvent() {
      window['cjAppAudioRecordResult'] = this.appRecordResult;
    },
    //app录音结果回调
    appRecordResult(resKey, time) {
      console.log('*******appRecordResult***', resKey, time)
      let resUrl = `https://qnobj.ckjr001.com/${resKey}`;
      let info = {
        content: resUrl,
        time:time
      }
      this.uploadAudioSuccess(info);
    },
    pusDate() {
      this.$emit('changeVal', this.formLindex, this.uploadAudioList)
    }
  },
  destroyed() {
  }
};
</script>

<style scoped>
.del-img {
  position: absolute;
  top: 0rem;
  right: 0rem;
  width: 0.7rem;
  height: 0.7rem;
  background-color: #999;
  border-radius: 50%;
  text-align: center;
  line-height: 0.7rem;
  /* cursor: pointer;
  background: rgba(0, 0, 0, 0.3); */
}
.wifi-symbol {
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  position: relative;
  transform: rotate(135deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translate3d(135deg,0,0);
  -webkit-backface-visibility: hidden;
}
.wifi-circle {
  /* border: 0.1rem solid #999999; */
  border-radius: 50%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  -webkit-transform: translate3d(0,0,0);
}

.first {
  width: 0.1rem;
  height: 0.1rem;
  background: #cccccc;
  top: 0.9rem;
  left: 0.9rem;
}
.second {
  width: 0.5rem;
  height: 0.5rem;
  top: 0.7rem;
  left: 0.7rem;
}
.seconAnimation{
  animation: fadeInOut 1s infinite 0.2s;
}
.third {
  width: 0.8rem;
  height: 0.8rem;
  top: 0.5rem;
  left: 0.5rem;
}
.thirdAnimation{
  animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
</style>
